<!DOCTYPE html>
<html lang="en">
//数据表展示
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.js"></script>
	<script src="https://unpkg.com/coco-message/coco-message.min.js"></script>
    <title>数据展示</title>
    <style>
        .number{
            color: red;
            font-size: 50px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">共有<span class="number"></span>人参与了活动</h1>
    <div style="display: flex;width: 100%; flex-wrap: wrap;">
        <div id="main1" style="width: 600px;height:400px;margin: 80px auto;"></div>
        <div id="main2" style="width: 600px;height:400px;margin: 80px auto;"></div>
        <div id="main3" style="width: 600px;height:400px;margin: 80px auto;"></div>
        <div id="main4" style="width: 600px;height:400px;margin: 80px auto;"></div>
        <div id="main5" style="width: 600px;height:400px;margin: 80px auto;"></div>
        <div id="main6" style="width: 600px;height:400px;margin: 80px auto;"></div>
        <div id="main7" style="width: 600px;height:400px;margin: 80px auto;"></div>
        <div id="main8" style="width: 600px;height:400px;margin: 80px auto;"></div>
        <div id="main9" style="width: 600px;height:400px;margin: 80px auto;"></div>
    </div>
    <script type="text/javascript">
        let arr = [];//定义一个数组arr
        $.ajax({//连接Ajax
            url: 'search.php',//地址
            dataType: "json"//服务器返回数据的类型为json
        }).then(res => {
            arr = res;
            $('.number').html(res.all)
            var myChart = echarts.init(document.getElementById('main1'));
            var option = {
                title: {
                    text: '晚上最佳入睡时间段'
                },
                tooltip: {},
                legend: {
                    data: ['时间段']
                },
                xAxis: {
                    data: ["11:00~12:00", "12:00~1:00", "1:00以后"]
                },
                yAxis: {},
                series: [{
                    name: '时间段',
                    type: 'bar',
                    data: [...arr.during]
                }]
            };
            myChart.setOption(option);
            var myChart = echarts.init(document.getElementById('main2'));
            var option = {
                title: {
                    text: '晚上几点仍未入睡才算熬夜'
                },
                tooltip: {},
                legend: {
                    data: ['时间段']
                },
                xAxis: {
                    data: ["11点以后", "12点以后", "1点以后"]
                },
                yAxis: {},
                series: [{
                    name: '时间段',
                    type: 'bar',
                    data: [...arr.time]
                }]
            };
            myChart.setOption(option);
            var myChart = echarts.init(document.getElementById('main3'));
            var option = {
                title: {
                    text: '每天的睡眠时间'
                },
                tooltip: {},
                legend: {
                    data: ['时间段']
                },
                xAxis: {
                    data: ["少于6小时", "6-7小时", "7-8小时", "多于8小时"]
                },
                yAxis: {},
                series: [{
                    name: '时间段',
                    type: 'bar',
                    data: [...arr.type]
                }]
            };
            myChart.setOption(option);  
            var myChart = echarts.init(document.getElementById('main4'));
            var option = {
                title: {
                    text: '熬夜天数：'
                },
                tooltip: {},
                legend: {
                    data: ['熬夜天数']
                },
                xAxis: {
                    data: ["不熬夜", "1-3天", "每天"]
                },
                yAxis: {},
                series: [{
                    name: '熬夜天数',
                    type: 'bar',
                    data: [...arr.days]
                }]
            };
            myChart.setOption(option);
            var myChart = echarts.init(document.getElementById('main5'));
            var option = {
                title: {
                    text: '您熬夜的原因'
                },
                tooltip: {},
                legend: {
                    data: ['原因']
                },
                xAxis: {
                    data: ["学习", "打游戏", "做课件","失眠"]
                },
                yAxis: {},
                series: [{
                    name: '原因',
                    type: 'bar',
                    data: [...arr.why]
                }]
            };
            myChart.setOption(option);
            var myChart = echarts.init(document.getElementById('main6'));
            var option = {
                title: {
                    text: '您熬夜后第二天的状态'
                },
                tooltip: {},
                legend: {
                    data: ['状态']
                },
                xAxis: {
                    data: ["精力依旧旺盛", "上课想睡觉"]
                },
                yAxis: {},
                series: [{
                    name: '状态',
                    type: 'bar',
                    data: [...arr.state]
                }]
            };
            myChart.setOption(option);
            var myChart = echarts.init(document.getElementById('main7'));
            var option = {
                title: {
                    text: '健康睡眠时长'
                },
                tooltip: {},
                legend: {
                    data: ['时长']
                },
                xAxis: {
                    data: ["6小时", "7小时", "8小时"]
                },
                yAxis: {},
                series: [{
                    name: '时长',
                    type: 'bar',
                    data: [...arr.health]
                }]
            };
            myChart.setOption(option);
            var myChart = echarts.init(document.getElementById('main8'));
            var option = {
                title: {
                    text: '熬夜的理由'
                },
                tooltip: {},
                legend: {
                    data: ['原因']
                },
                xAxis: {
                    data: ["学业上的需要", "没有良好的休息环境", "外界的噪音"]
                },
                yAxis: {},
                series: [{
                    name: '原因',
                    type: 'bar',
                    data: [...arr.reason]
                }]
            };
            myChart.setOption(option);
            var myChart = echarts.init(document.getElementById('main9'));
            var option = {
                title: {
                    text: '熬夜会对您造成以下伤害'
                },
                tooltip: {},
                legend: {
                    data: ['症状']
                },
                xAxis: {
                    data: ["头痛", "腰酸背痛", "精神不振","注意力不集中"]
                },
                yAxis: {},
                series: [{
                    name: '症状',
                    type: 'bar',
                    data: [...arr.damage]
                }]
            };
            myChart.setOption(option);
        })
    </script>
</body>

</html>